 /* craco.config.js */

const path = require('path');
const webpack = require('webpack');
const CracoLessPlugin = require('craco-less');
const antdTheme = require('./antd.theme');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { whenProd } = require('@craco/craco');

module.exports = {
    devServer: {
        proxy: {
            '/magic': {
                target: 'http://apiv2.aminer.cn',
                // target: 'http://192.168.15.204:5005', // liuyi
                changeOrigin: true,
            },
        }
    },
    /**
     * 扩展 babel 配置
     */
    babel: {
        plugins: [
            // ['@babel/plugin-proposal-private-methods', {loose: true }],
            /**
             * antd按需加载
             */
            [
                'import',
                {
                    libraryName: 'antd',
                    libraryDirectory: 'es',
                    style: true,
                },
                'antd',
            ],
            /**
             * https://github.com/tleunen/babel-plugin-module-resolver
             *
             * 解决 babel-plugin-react-css-modules 不兼容 webpack alias 问题
             *
             * Support for Webpack resolve aliases
             *  https://github.com/gajus/babel-plugin-react-css-modules/issues/46
             */
            [
                'module-resolver',
                {
                    alias: {
                        '@': path.resolve(__dirname, 'src'),
                    }
                }
            ]
        ]
    },
    /**
     * 新增 craco 提供的 plugin
     */
    plugins: [
        /**
         * 支持 less
         *  - https://github.com/DocSpring/craco-less
         *  - options 参数：https://github.com/DocSpring/craco-less#configuration
         */
        {
            plugin: CracoLessPlugin,
            options: {
                modifyLessRule(lessRule, context) {
                    return {
                      ...lessRule,
                      ...{
                        test: /\.less$/,
                        exclude: /\.module\.less$/,
                      },
                    };
                },
                lessLoaderOptions: {
                    lessOptions: {
                        // 自定义 antd 主题
                        modifyVars: antdTheme,
                        javascriptEnabled: true,
                    },
                },
            },
        },
    ],
    webpack: {
        /**
         * 重写 webpack 任意配置
         *  - configure 能够重写 webpack 相关的所有配置，但是，仍然推荐你优先阅读 craco 提供的快捷配置，把解决不了的配置放到 configure 里解决；
         *  - 这里选择配置为函数，与直接定义 configure 对象方式互斥；
         */
        configure: (webpackConfig, { env, paths }) => {
            webpackConfig.plugins.map(plugin => {
                /**
                 * 处理MiniCssExtractPlugin打包警告
                 */
                whenProd(() => {
                  if (plugin instanceof MiniCssExtractPlugin) {
                    Object.assign(plugin.options, {
                        ignoreOrder: true
                    });
                  }
                });
        
                return plugin;
            });
    
            return webpackConfig;
        }
    }
};